<template>
  <el-container class="el-container">
    <el-header class="el-header" height="60px">Header</el-header>
    <el-main class="el-main">
      <div class="login-box">
        <el-form :model="loginForm" ref="loginForm" :rules="rules">
          <div style="margin-bottom:10px">
            系统登陆
          </div>
          <el-form-item prop="username">
            <el-input
              type="text"
              placeholder="username"
              v-model="loginForm.username"
              autocomplete="on"
            >
              <template #prefix>
                <span class="svg-container">
                  <svg-icon icon-class="user" style="width:15px" />
                </span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :type="passwordType"
              placeholder="password"
              v-model="loginForm.password"
              autocomplete="off"
              ref="password"
            >
              <template #prefix>
                <span class="svg-container">
                  <svg-icon icon-class="lock" style="width:14px" />
                </span>
              </template>
              <template #suffix>
                <span class="show-pwd" @click="showPwd">
                  <svg-icon
                    :icon-class="
                      passwordType === 'password' ? 'eye' : 'eye-open'
                    "
                    style="width:14px"
                  />
                </span>
              </template>
            </el-input>
          </el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            style="width:100%;margin-bottom:30px;"
            @click.native.prevent="handleLogin"
          >
            login
          </el-button>
          <div style="font-size:12px;color:#889aa4">
            其他登陆方式
          </div>
          <div style="margin-top:30px">
            <span style="cursor:pointer">
              <svg-icon icon-class="wechat" style="width:23px" />
            </span>
            <span style="cursor:pointer">
              <svg-icon icon-class="weibo" style="width:100px" />
            </span>
            <span style="cursor:pointer">
              <svg-icon icon-class="qq" style="width:23px" />
            </span>
          </div>
        </el-form>
      </div>
    </el-main>
    <el-footer class="el-footer" height="30px">Footer</el-footer>
  </el-container>
</template>
<script>
export default {
  name: 'login',
  data: function () {
    const validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password'
    }
  },
  methods: {
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('auth/login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push('/')
          }).catch(err => {
            this.loading = false
            this.$message.error(err)
          })
        }
      })
    },
    showPwd () {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    }
  }
}
</script>
<style scoped>
.el-container {
  height: 100%;
}

.el-header {
  background-color: #eff4fa;
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
  text-align: center;
  height: calc(100vh - 90px);
}
.el-footer {
  background-color: #eff4fa;
  color: #333;
  text-align: center;
}
.login-box {
  width: 300px;
  height: 300px;
  border: solid 1px #dfdfdf;
  border-radius: 4px;
  position: fixed;
  right: 100px;
  top: 150px;
  padding: 20px;
}

.svg-container {
  padding-top: 5px;
  padding-left: 3px;
  color: #889aa4;
  vertical-align: middle;
  display: inline-block;
}
.show-pwd {
  padding-top: 5px;
  padding-right: 3px;
  color: #889aa4;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
}
</style>
